<template>
<div class="over">
<div class="all">
    <div class="left">
        <div class="left_1">
            <h4 class="product_name">{{productMessage.pname}}</h4>
        </div>
        <div class="left_2">
            <span class="product_time">{{productMessage.preleasetime}}</span>
        </div>
        <div class="left_3">
            <img src="../../assets/product/product_intro.png"/>
            <span class="title_1">产品简介：</span>
            <div class="product_msg">{{productMessage.pmoreinformation}}</div>
            <!-- <div class="product_msg">{{product_intro2}}</div> -->
            <!-- <div class="product_msg">{{product_intro}}</div>
            <div class="product_msg">{{product_intro}}</div> -->
        </div>
        <div class="left_4">
            <img src="../../assets/product/product_adver.png"/>
            <span class="title_1">广告/交互要求：</span>
            <div class="product_msg">{{productMessage.prequirement}}</div>
            <!-- <div class="product_msg">{{product_adver[1]}}</div>
            <div class="product_msg">{{product_adver[2]}}</div> -->
            <!-- <div class="product_msg">{{product_adver}}</div> -->
        </div>
    </div>

    <div class="right">
        <div class="block">
            <el-carousel trigger="click" height="360px">
                <el-carousel-item v-for="item in img" :key="item">
                     <img class="imgI" :src="item"/>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>

    <div class="bottom">
        <span class="title_1">3D模型:</span>
        <el-button class="button" type="success" plain>下载</el-button>
        <el-button class="button_1" type="success">更多信息</el-button>
        <!-- <el-button class="button2_1" type="warning" >撤下</el-button>
        <el-button class="button2" type="info" >编辑</el-button> -->
    </div>
    
</div>

</div>
  
</template>

<script>
export default {
    name:'product',
    data() {
        return {
            product_name:"iPhone13 pro",
            product_time:"2021/12/30 13:30:23",
            product_intro:"··iPhone 13 Pro是苹果公司于北京时间2021年9月15日发布的智能手机。··iPhone 13Pro搭载A15 Bionic芯片，拥有四种配色，支持5G网络。有128G、256G、512G、1T可选，售价为999美元起。",
            product_intro2:"··具有IP68级防水，采用独家超瓷晶面板 [15]  。搭载1200万广角镜头+1200万超广角镜头后置摄像系统，前置为1200万像素摄像头。搭载A15 Bionic芯片，支持5G。",
            product_adver:[ "1.产品交互可以实现自然的安放，提高用户体验","2.产品交互可实现3D立体显示，全方位展现","3.实现与手机屏幕的交互，对模型进行旋转、放大"],
             img:[
                require('../../assets/product/diannao.jpg'),
                require('../../assets/product/diannao2.jpg'),
                require('../../assets/product/diannao.jpg'),
                require('../../assets/product/diannao2.jpg'),
            ],
            productMessage:{},
        }
    },
    methods:{
        
             productGetMessage(){
                    //获取上个界面存储的ID
                    var rams=JSON.parse(sessionStorage.getItem("pid"));
                    // console.log(sessionStorage.getItem("vid"));
                    console.log(rams);
                    console.log(typeof(rams));
                    console.log(rams=="1");
                    console.log(typeof("1"))
                    var rams2=Number(rams);
                    console.log(rams2);
                    // var params1=qs.stringify(sessionStorage.getItem("vid"));
                    // console.log(params1);
                    this.$axios({
                    method:'post',
                    url:'http://1.117.65.58:9001/product/findbypid',
                    params:{"pid":rams2},
                    //    headers: {'Content-Type': 'application/json; charset=utf-8'},
                    }).then(response=>{
                    console.log(response);
                    const arr =response.data.data;
                    this.productMessage=arr;
                    console.log(777)
                    console.log(this.productMessage)
                    // window.sessionStorage.setItem('userInfo',JSON.stringify(arr));
                }).catch(function(err){
                    console.log(err)
                })
            },
    },
    mounted(){
        this. productGetMessage();
        // location.reload();
    }

}
</script>


<style scoped>
@import "../../style/product.css";
</style>
